<template>
    <view class="container">
        <u-image src="/static/images/register.png" mode="widthFix" width="100%" height="5699"></u-image>
        <view class="btn-area safe-area-inset-bottom">
            <view class="u-flex" id="guide001">
                <view class="btn-1" @click="warnning">无邀请码注册</view>
                <view class="btn-2" @click="showReg(1)">邀请码注册</view>
            </view>
        </view>
        <register-pop ref="popRef"></register-pop>
        <!-- <guide ref="guideRef" :index="data.currentGuideIndex"></guide> -->
        <visitor v-if="data.show" @show="showReg" ref="visitorRef"></visitor>
    </view>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, reactive } from 'vue'
import { useGuideStore } from '@/store'
import guide from '@/components/guide/guide.vue'
import visitor from './visitorPop.vue'
import registerPop from './c/register-pop.vue'

const guideStore = useGuideStore()

/** 组件引用 */
const guideRef = ref<any>(null)
/** 弹窗visitor的引用 */
const visitorRef = ref<any>(null)

const popRef = ref<any>(null)

interface dataProps {
    loaded: boolean
    show: boolean
    // guideArray: Array<any>
    // currentGuideIndex: number
}

const data = reactive<dataProps>({
    loaded: false,
    show: false,
    // guideArray: [
    //     {
    //         guideID: 'guide001',
    //         src: '/static/guide/2.png',
    //         imgW: 619,
    //         imgH: 151,
    //         width: 140,
    //         type: 'left',
    //         Mleft: 0,
    //         Mtop: '700',
    //         Cleft: 10,
    //         Btop: '60vh',
    //         direction: 'up'
    //     }
    // ],
    // currentGuideIndex: 0
})

onMounted(() => {
    // setTimeout(() => {
    //     if (!guideStore.guideConfig.has('register')) {
    //         // 显示引导页面
    //         console.log('显示引导页面', guideRef.value)

    //         guideRef.value.init(data.guideArray)

    //         // guideRef.value?.show()
    //         // this.initGuideFun(this.currentGuideIndex)
    //     }
    // }, 500)
})

/** 无邀请码注册 */
function warnning(): void {
    data.show = true
    nextTick(() => {
        visitorRef.value.show = true
    })
}

/** 邀请码注册 */
function showReg(type: number) {
    data.show = false
    popRef.value.open({ type })
}
</script>

<style scoped lang="scss">
.container {
    min-height: 200vh;
    padding-bottom: calc(170rpx - 11px + var(--status-bar-height));
    .btn-area {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        background-color: #fec9bf;
        padding: 35rpx 30rpx;
        & > view {
            display: flex;
            justify-content: space-around;
        }
        .btn-1 {
            background: linear-gradient(to bottom, #fca893, #f58d40);
            color: white;
            border-radius: 50rpx;
            padding: 10rpx 30rpx;
            line-height: 80rpx;
            font-size: 34rpx;
        }
        .btn-2 {
            background: linear-gradient(to bottom, #fc4f75, #ee335c);
            color: white;
            border-radius: 50rpx;
            padding: 10rpx 30rpx;
            line-height: 80rpx;
            font-size: 34rpx;
        }
    }
    #guide001 {
        margin-bottom: 20rpx;
    }
}
</style>
